<!-- 审核状态组件 -->
<template>
  <span :class="['auditState', stateClass]">
    {{ stateText }}
  </span>
</template>

<script>
export default {
  name: "AuditStateColumn",
  props: {
    auditState: {
      type: Number,
      required: true,
    },
  },
  computed: {
    stateText() {
      switch (this.auditState) {
        case 0:
          return "待审核";
        case 1:
          return "审核通过";
        case 2:
          return "未通过";
        default:
          return "未知状态";
      }
    },
    stateClass() {
      switch (this.auditState) {
        case 0:
          return "state-pending";
        case 1:
          return "state-approved";
        case 2:
          return "state-rejected";
        default:
          return "";
      }
    },
  },
};
</script>

<style scoped>
.auditState {
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  /* 文字颜色为白色 */
}

/* 待审核：灰色 */
.state-pending {
  background-color: #9e9e9e;
  /* 灰色 */
}

/* 审核通过：绿色 */
.state-approved {
  background-color: #67c23a;
  /* 绿色 */
}

/* 审核不通过：红色 */
.state-rejected {
  background-color: #f56c6c;
  /* 红色 */
}
</style>